<template>
  <div class="ht-container" v-loading="state.loading">
    <HtHeader :data="breadData"> </HtHeader>

    <HtSearch
      @handelVisible="handelVisible"
      placeholder="搜索    移库单号"
      @reset="reset"
      :showFilter="true"
      @search="search"
    >
      <template slot="center">
        <el-col :span="6">
          <el-form-item label="厂区">
            <ht-select-base-data
              :dataTypeId="'Factorys'"
              @change="changeFactorys"
              :clearable="true"
            >
            </ht-select-base-data>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4">
          <el-form-item label="移入厂区">
            <ht-select-base-data
              :dataTypeId="'Factorys'"
              @change="changeFactorys"
              :clearable="true"
            ></ht-select-base-data>
          </el-form-item>
        </el-col> -->

        <el-col :span="6">
          <el-form-item label="酒库">
            <SelectWineInventory
              :dataTypeId="'positions'"
              v-model="state.filter.wareHouseCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWineInventory>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="酒品">
            <SelectWine
              :dataTypeId="'positions'"
              v-model="state.filter.wineBreedCode"
              @change="handleSearch"
              :clearable="true"
            ></SelectWine>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="容器">
            <asset-select-assets-plus
              style="width: 100%"
              @callback="callbackAsset"
              @click="state.activeWine = 'in'"
            >
              <div
                style="
                  height: 32px;
                  border: 1px solid #cfdade;
                  box-sizing: border-box;
                  padding: 0 13px;    line-height: 32px;    margin-top: 5px;
                "
              >
                {{ state.filter.sapCode }}
              </div>
            </asset-select-assets-plus>
          </el-form-item>
        </el-col>
      </template>
      <template slot="footer">
        <el-col :span="8">
          <el-form-item label="创建时间">
            <SelectTimeRange
              :pickerOptions="{
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
              }"
              v-model="state.filter.timeArr"
              style="width: 100%; margin-top: 4px"
              @change="handleSearch"
              :clearable="true"
            ></SelectTimeRange>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建班组">
            <ht-select-org
              v-model="state.filter.applyOrganizationUnitId"
              @change="handleSearch"
              :clearable="true"
            ></ht-select-org>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="移库状态">
            <SelectStatusEnum
              v-model="state.filter.status"
              enumStatus="WarehouseWineTransferStatusEnum"
              :clearable="true"
              @change="handleSearch"
              style="width:100%"
            ></SelectStatusEnum>
          </el-form-item>
        </el-col>
      </template>
    </HtSearch>

    <el-card class="ht-card" style="margin-top: 16px">
      <ht-table
        class="ht-table-no-border"
        :data="state.dataSource"
        @onchange="changePage"
        style="width: 100%; margin-top: 12px"
        border
        pageStyle="text-align:right"
        :height="`calc(100vh - 314px - ${state.searchHeight}px)`"
        highlight-current-row
        :page-info="{
          currentPage: state.filter.currentPage,
          pageSize: state.filter.maxResultCount,
          skipCount: state.filter.skipCount,
          totalCount: state.filter.totalCount,
        }"
        :columns="columns"
        :isExpand="true"
        @expand-change="expandChange"
        :expand-row-keys="state.expandKeys"
      >
        <Temp slot="empty">
          <span slot="tips">暂无数据哦</span>
        </Temp>

        <div slot="expand" slot-scope="{ row, rowIndex }">
          <div>
            <ht-table
              :ref="`table_${rowIndex}`"
              :data="row.childDetail"
              style="width: 110%"
              border
              :stripe="false"
              :hide-order="true"
              :hide-page="true"
              highlight-current-row
              :columns="columns2"
            >
              <template slot="StartTime" slot-scope="{ row }">
                <span>
                  {{ row.StartTime?.replace('T', ' ').slice(0, 16) }}</span
                >
              </template>
              <template slot="EndTime" slot-scope="{ row }">
                <span> {{ row.EndTime?.replace('T', ' ').slice(0, 16) }}</span>
              </template>
            </ht-table>
          </div>
        </div>

        <template slot="status" slot-scope="{ row }">
          <Status :color="corlor[row.status].corlor">
            <span>{{ corlor[row.status].label }}</span>
          </Status>
        </template>

        <template slot="transOrderNo" slot-scope="{ row }">
          <span class="cursor" @click="handDetail(row)">
            {{ row.transOrderNo }}</span
          >
        </template>
        <template slot="creationTime" slot-scope="{ row }">
          <span> {{ row.creationTime?.replace('T', ' ').slice(0, 16) }}</span>
        </template>

        <template slot="creatorId" slot-scope="{ row }">
          <ht-select-user
            :readonly="true"
            v-if="row.creatorId"
            :value="row.creatorId"
          ></ht-select-user>
        </template>

        <template slot="applyOrganizationUnitId" slot-scope="{ row }">
          <ht-select-org
            :readonly="true"
            v-if="row.applyOrganizationUnitId"
            :value="row.applyOrganizationUnitId"
          ></ht-select-org>
        </template>

        <template slot="handel" slot-scope="{ row }">
          <span
            class="cursor"
            style="margin-right:16px;"
            @click="handDetail(row)"
            >详情</span
          >
        </template>
      </ht-table></el-card
    >

    <!-- 移库详情 -->
    <ht-drawer
      class="ht-new-drawer"
      v-if="state.visible1"
      v-model="state.visible1"
      title="移库详情"
      size="100%"
    >
      <WineMoveDetail :selectRow="state.selectRow"></WineMoveDetail>

      <div slot="foot">
        <!-- 提示 -->

        <el-button
          :loading="state.loading"
          style="margin: 0px 24px; "
          @click="state.visible1 = false"
          >取消</el-button
        >
      </div>
    </ht-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Status from '@/components/status.vue';
import HtHeader from '@/components/htHeader.vue';
import HtSearch from './HtSearch.vue';
import Temp from '@/components/temp.vue';
import SelectTimeRange from '@/components/selectTimeRange.vue';
import WineMoveDetail from './wineMoveDetail.vue';
import { BreadType, Column, PageType } from 'htui-yllkbz/src/packages/type';
import { _axios } from 'vue-kst-auth';
import {
  TransStorageOrderPageListDto,
  WarehouseWineTransferApi,
  WarehouseWineTransferDto,
} from '@/plugins/api';

import SelectWineInventory from '@/components/selectWineInventory.vue';
import SelectWine from '@/components/selectWine.vue';
import SelectOrgUser from '@/components/selectOrgUser.vue';
import SelectStatusEnum from '@/components/selectStatusEnum.vue';
import SelectOrg from '@/components/selectOrg.vue';
interface State {
  /** 数据状态 */
  loading: boolean;
  searchHeight: number;
  filter: {
    keyWords: string | undefined;
    wineBreedCode: string | undefined;
    wareHouseCode: string | undefined;
    sapCode: string | undefined;
    creationTimeBegin: string | undefined;
    creationTimeEnd: string | undefined;
    timeArr: any;
    status: any;
    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
    factoryName: string | undefined;
    applyOrganizationUnitId: string | undefined;
  };
  dataSource: any;
  /** 批量选中的数据 */
  selectRow: any;
  selectRows: any[];
  visible: boolean;
  visible1: boolean;
  visible2: boolean;
  active: number;
  activeName: string;
  backTrackingData: any;

  activeWine: string | undefined;
}
@Component({
  components: {
    HtHeader,
    Temp,
    HtSearch,
    SelectTimeRange,
    WineMoveDetail,
    SelectWine,
    Status,
    SelectOrgUser,
    SelectOrg,
    SelectStatusEnum,
    SelectWineInventory,
  },
})
export default class Index extends Vue {
  WarehouseWineTransferApi = new WarehouseWineTransferApi(
    '/alcohol-management',
    _axios
  );

  /** 数据 */
  state: State = {
    loading: false,
    searchHeight: 84,
    filter: {
      keyWords: undefined,
      wineBreedCode: undefined,
      wareHouseCode: undefined,
      sapCode: undefined,
      creationTimeBegin: undefined,
      creationTimeEnd: undefined,
      timeArr: [],
      status: undefined,
      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
      factoryName: undefined,
      applyOrganizationUnitId: undefined,
    },
    dataSource: [],
    /** 批量选中的数据 */
    selectRow: {},
    selectRows: [],
    visible: false,
    visible1: false,
    visible2: false,
    active: 0,
    activeName: 'second',
    backTrackingData: {},

    activeWine: '',
  };
  /** 生命周期 */
  mounted() {
    this.getDataSource();
  }

  /**展开预警 */
  expandChange(row: WarehouseWineTransferDto, dataArray: any[]) {
    if (dataArray.indexOf(row) !== -1) {
      //expand 展开
      this.expandShow(row);

      // this.state.disabled = true;
    } else {
      //expand  关闭
      // this.state.expandKeys = [];
      // this.state.disabled = false;
    }
  }

  // 获取厂区名字

  changeFactorys(id: string, obj: any) {
    const factoryName = obj[0]?.name;

    this.state.filter.factoryName = factoryName;

    this.handleSearch();
  }

  expandShow(row: WarehouseWineTransferDto) {
    console.log(row, 'row');
    const _index = this.state.dataSource.findIndex(
      (item: any) => item.id == (row as WarehouseWineTransferDto).id
    );

    const arr = [
      //厂区
      {
        type: '移出',
        Factory: row.export_Factory,
        Warehouse: row.export_Warehouse,
        number: row.export_number,
        StartValue: row.export_StartValue,
        EndValue: row.export_EndValue,
        StartTime: row.export_StartTime,
        EndTime: row.export_EndTime,
        Handler: row.export_Handler,
        Checker: row.export_Checker,
      },
      {
        type: '移入',
        Factory: row.import_Factory,
        Warehouse: row.import_Warehouse,
        number: row.import_number,
        StartValue: row.import_StartValue,
        EndValue: row.import_EndValue,
        StartTime: row.import_StartTime,
        EndTime: row.import_EndTime,
        Handler: row.import_Handler,
        Checker: row.import_Checker,
      },
    ];

    this.$set(this.state.dataSource[_index], 'childDetail', arr);
  }

  callbackAsset(val: any) {
    if (val?.detail[0] == undefined) {
      return;
    }

    const realValue = val?.detail[1][0];

    if (this.state.activeWine == 'out') {
      // this.state.filter.outSapCode = realValue.extraObj.SapCode;
    } else if (this.state.activeWine == 'in') {
      this.state.filter.sapCode = realValue.extraObj.SapCode;
    }

    this.handleSearch();
  }
  /** 方法 */
  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;
    if (this.state.filter.timeArr?.length) {
      this.state.filter.creationTimeBegin = this.state.filter.timeArr[0];
      this.state.filter.creationTimeEnd = this.state.filter.timeArr[1];
    } else {
      this.state.filter.creationTimeBegin = '';
      this.state.filter.creationTimeEnd = '';
    }

    this.getDataSource();
  }
  /** 重置 */
  reset() {
    const { filter } = this.state;

    (filter.status = undefined), (filter.timeArr = []);
    filter.keyWords = undefined;
    filter.sapCode = undefined;
    filter.factoryName = undefined;
    (filter.wareHouseCode = undefined),
      (filter.wineBreedCode = undefined),
      (filter.applyOrganizationUnitId = undefined);
    // filter.filterText = "";

    // filter.isEnabled = undefined;
    this.handleSearch();
  }
  // 点击进入详情
  handDetail(val: any) {
    this.state.visible1 = true;
    this.state.selectRow = val;
  }
  /** 搜索框 */
  handelVisible(height: number) {
    this.state.searchHeight = height;
  }

  //分页
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }
  /** 查询列表 */
  getDataSource() {
    this.state.loading = true;
    const { filter } = this.state;

    this.WarehouseWineTransferApi.getList8(
      filter.keyWords,
      undefined,
      filter.factoryName,
      filter.wareHouseCode,
      filter.sapCode,
      undefined,
      filter.wineBreedCode,
      filter.creationTimeBegin,
      filter.creationTimeEnd,
      filter.applyOrganizationUnitId,

      filter.status,

      filter.skipCount,
      filter.maxResultCount
    )
      .then((res: any) => {
        this.state.dataSource = res.items || [];

        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }
  /** 搜索的回调 */
  search(data: any) {
    this.state.filter.keyWords = data.keys;

    this.handleSearch();
  }

  /** 监听 */
  /** 计算属性 */
  get breadData(): BreadType[] {
    return [
      { key: 'k1', title: '库存业务管理' },
      { key: 'k2', title: '移库' },
    ];
  }
  /** 计算属性 */
  get columns(): Column[] {
    return [
      { key: 'orderNo', title: '移库单号' },

      //
      { key: 'creationTime', title: '创建时间' },
      { key: 'applyOrganizationUnitId', title: '创建班组' },
      //
      { key: 'creatorId', title: '创建人' },
      //

      { key: 'status', title: '移库状态' },

      { key: 'handel', title: '操作' },
    ];
  }
  get columns2(): Column[] {
    return [
      //
      { key: 'type', title: '类型' },
      { key: 'Factory', title: '厂区' },
      { key: 'Warehouse', title: '酒库' },
      { key: 'number', title: '容器' },
      { key: 'StartValue', title: '移出期初值' },
      { key: 'EndValue', title: '移出期末值' },
      { key: 'StartTime', title: '开始时间' },
      { key: 'EndTime', title: '结束时间' },
      { key: 'Handler', title: '经手人' },
      { key: 'Checker', title: '确认人' },
    ];
  }

  get corlor() {
    return [
      {
        value: 0,
        label: '待开阀',
        corlor: '#E2B236',
      },
      {
        value: 1,
        label: '待移库',
        corlor: '#E2B236',
      },
      {
        value: 2,
        label: '移库中',
        corlor: '#4ECC7A',
      },
      {
        value: 3,
        label: '待关阀',
        corlor: '#E2B236',
      },
      {
        value: 4,
        label: '待完成验度',
        corlor: '#E2B236',
      },

      {
        value: 5,
        label: '已完成移库',
        corlor: '#CACECB',
      },
    ];
  }
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}
</style>
